import { s_queryBaseData } from "@/services/basis";
import { ActionType, ProCard, ProColumns, ProForm, ProFormInstance, ProFormText, ProTable } from "@ant-design/pro-components";
import { Button, Col, message, Modal, Row } from "antd";
import { useRef, useState } from "react";

const App:React.FC<{setData:any,componentRef:any}>=(props)=>{
    const [open,setOpen]=useState(false);
    
    const [materials,setMaterials]=useState<DataType[]>([]);
    const [userDefines,setUserDefines]=useState([]);
    const [material,setMaterial]=useState<any>();

    const form_ref=useRef<ProFormInstance>();
    const table_ref=useRef<ActionType>();

    function getMaterial(){
        setOpen(true);
    }

    async function findMaterial(){
      const fdata=form_ref.current?.getFieldsValue();
      // alert(JSON.stringify(fdata));
      const x=await s_queryBaseData({x_id:1,source:'v_material',tdata:fdata});
      if(x.success){
        message.success('查询成功');
        setMaterials(x.data[0]);
        setUserDefines(x.data[1]);
      }else
       message.error('查询失败，请联系管理员');

    }; 

    interface DataType{
      id:number,
      code:string,
      name:string,
      invstd:string,
      invstd2:string,
      munit_name:string,
    }
    const columns:ProColumns<DataType>[]=[
      {dataIndex:'id',hidden:true},
      {dataIndex:'code',title:'编码'},
      {dataIndex:'name',title:'名称'},
      {dataIndex:'invstd',title:'规格'},
      {dataIndex:'invstd2',title:'型号'},
      {dataIndex:'munit_name',title:'计量单位'},
    ];

    function onClose(){
      setOpen(false);
      props.setData({});
    }
    function onOk(){
      setOpen(false);
      props.componentRef.current?.setFieldsValue({
        material_id:material.material.id,
        material_code:material.material.code,
        material_name:material.material.name,
        invstd:material.material.invstd,
        invstd2:material.material.invstd2,
        munit_name:material.material.munit_name,
      });
    }

    return (
        <>
          <Button onClick={()=>getMaterial()}>选择商品</Button>
          <Modal open={open} closable destroyOnClose onClose={()=>onClose()} onCancel={()=>onClose()}
                onOk={()=>onOk()} width={'60%'}
            >
              <ProCard  style={{height:800}}>
              <ProForm formRef={form_ref}
                 submitter={false} 
                 onFinish={()=>findMaterial()}
              >
                   <Row gutter={8}>
                    <Col span={10}> 
                       <ProFormText name='code' label='商品编码' /> 
                       <ProFormText name='name' label='商品名称' /> 
                      </Col>
                    <Col span={4}></Col>
                    <Col span={10}> 
                       <ProFormText name='invstd' label='规格' /> 
                       <ProFormText name='invstd2' label='型号' /> 
                     </Col>
                  </Row>
                  <Row>
                    <Col>
                    <Button onClick={()=>form_ref.current?.submit()} style={{width:'100%'}}>开始查询</Button>
                    </Col>
                  </Row>
                  
              </ProForm>
              {/* {JSON.stringify(material)} */}
              <ProTable<DataType>
                    actionRef={table_ref}
                    dataSource={materials}
                    columns={columns}
                    rowKey='id'
                    pagination={{
                      pageSize:10,
                      showQuickJumper:true,
                    }}
                    rowSelection={{
                      type:'radio',
                      onChange(selectedRowKeys, selectedRows, info) {
                        setMaterial({material:selectedRows[0],
                                     userdefine:userDefines.filter((item:any)=>item.material_id==selectedRows[0].id)});
                        props.setData({material:selectedRows[0],
                          userdefine:userDefines.filter((item:any)=>item.material_id==selectedRows[0].id)});
                        // alert(JSON.stringify(material));
                      },
                    }}
                    scroll={{y:300}}
                    search={false}
                    />
               </ProCard>
          </Modal>
        </>
    )
}

export default App;
